<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="../../../node_modules/vue/dist/vue.js"></script>
    <script src="../../../node_modules/vuex/dist/vuex.js "></script>

    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
    <style>
       
        
    </style>
</head>


<body>


    <div id="app">
        <h2>{{msg}}</h2>
        <a @click="add">点击</a>
        <counter ></counter>
    </div>



    <script>

        var  counter  ={
            template: ` <div>{{ count }}</div>` ,
               computed:{  //方法 
                   count(){    //根据  store中  的 state 定义
                       return this.$store.state.count
                   }
               }
         
        }


        var store = new Vuex.Store({    //两个大写
            state : {
                count: 1 ,
                nickName:''
            },
         mutations:{

                increment(state){

                    state.count++ ;
                    alert("增加")
                        // while(state.count<200){
                        //     state.count++ ;
                        // }

                        // for( var i=0; i<state.count ;i++){
                        //      state.count++  
                        // }
                },
                updateInfo(state ,nickName){
                    state.nickName=nickName; 
                }
         }
        });

       


        var  vm =new Vue({            
            el:'#app',

           store,

            data:{
                    msg: " vuex 的使用" ,
                    
            },
            components:{
                counter
            },
            methods:{
                add(){
                    this.$store.commit("increment")   ;  //规定语法
                    alert("chufa");

                }
            }
        });
        
    </script>

</body>
</html>